/**
 * 设计方案预览组件
 * 使用简化的 HTML/CSS 渲染设计预览
 */

import React from 'react';
import { DesignSchema } from '../types';
import { Button } from '@alifd/next';

interface DesignPreviewProps {
  design: DesignSchema;
  onClick?: () => void;
  onSelect: () => void;
}

/**
 * 根据设计 ID 渲染对应的预览效果
 */
const DesignPreview: React.FC<DesignPreviewProps> = ({ design, onClick, onSelect }) => {
  const designId = design.id;

  console.log('DesignPreview: 渲染设计方案', designId, design.title);
  const containerStyle: React.CSSProperties = {
    width: '100%',
    height: '200px',
    backgroundColor: '#f5f5f5',
    border: '1px solid #e0e0e0',
    borderRadius: '8px',
    overflow: 'hidden',
    position: 'relative',
  };

  // 渲染预览内容
  const renderPreviewContent = () => {
    // 简洁欢迎页预览
    if (designId === 'design-1') {
      return (
        <div
          style={{
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            height: '100%',
            backgroundColor: '#fafafa',
            padding: '20px',
          }}
        >
          <div
            style={{
              fontSize: '24px',
              fontWeight: 'bold',
              color: '#333',
              marginBottom: '12px',
            }}
          >
            欢迎使用低代码平台
          </div>
          <div
            style={{
              fontSize: '14px',
              color: '#666',
            }}
          >
            快速搭建企业级应用
          </div>
        </div>
      );
    }

    // 标准表单页预览
    if (designId === 'design-2') {
      return (
        <div
          style={{
            height: '100%',
            backgroundColor: '#f0f0f0',
            padding: '16px',
          }}
        >
          <div
            style={{
              backgroundColor: '#fff',
              borderRadius: '4px',
              padding: '16px',
              height: 'calc(100% - 32px)',
            }}
          >
            <div
              style={{
                fontSize: '16px',
                fontWeight: 'bold',
                color: '#333',
                marginBottom: '12px',
                borderBottom: '1px solid #e8e8e8',
                paddingBottom: '8px',
              }}
            >
              信息录入表单
            </div>
            <div
              style={{
                fontSize: '12px',
                color: '#999',
                lineHeight: '20px',
              }}
            >
              <div>表单字段 1: _______________</div>
              <div>表单字段 2: _______________</div>
              <div>表单字段 3: _______________</div>
            </div>
          </div>
        </div>
      );
    }

    // 双列卡片布局预览
    if (designId === 'design-3') {
      return (
        <div
          style={{
            height: '100%',
            backgroundColor: '#f0f0f0',
            padding: '12px',
            display: 'flex',
            gap: '12px',
          }}
        >
          <div
            style={{
              flex: 1,
              backgroundColor: '#fff',
              borderRadius: '4px',
              padding: '16px',
              display: 'flex',
              flexDirection: 'column',
            }}
          >
            <div
              style={{
                fontSize: '14px',
                fontWeight: 'bold',
                color: '#333',
                marginBottom: '8px',
              }}
            >
              卡片 1
            </div>
            <div
              style={{
                fontSize: '12px',
                color: '#999',
              }}
            >
              内容区域
            </div>
          </div>
          <div
            style={{
              flex: 1,
              backgroundColor: '#fff',
              borderRadius: '4px',
              padding: '16px',
              display: 'flex',
              flexDirection: 'column',
            }}
          >
            <div
              style={{
                fontSize: '14px',
                fontWeight: 'bold',
                color: '#333',
                marginBottom: '8px',
              }}
            >
              卡片 2
            </div>
            <div
              style={{
                fontSize: '12px',
                color: '#999',
              }}
            >
              内容区域
            </div>
          </div>
        </div>
      );
    }

    // 数据仪表盘预览
    if (designId === 'design-4') {
      return (
        <div
          style={{
            height: '100%',
            backgroundColor: '#f0f0f0',
            padding: '12px',
            display: 'flex',
            gap: '12px',
          }}
        >
          {[
            { label: '指标1', value: '1,234', color: '#1890ff' },
            { label: '指标2', value: '5,678', color: '#52c41a' },
            { label: '指标3', value: '9,012', color: '#faad14' },
          ].map((item, index) => (
            <div
              key={index}
              style={{
                flex: 1,
                backgroundColor: '#fff',
                borderRadius: '4px',
                padding: '16px',
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
                justifyContent: 'center',
              }}
            >
              <div
                style={{
                  fontSize: '24px',
                  fontWeight: 'bold',
                  color: item.color,
                  marginBottom: '4px',
                }}
              >
                {item.value}
              </div>
              <div
                style={{
                  fontSize: '11px',
                  color: '#999',
                }}
              >
                {item.label}
              </div>
            </div>
          ))}
        </div>
      );
    }

    // 默认预览
    return (
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          height: '100%',
          color: '#999',
        }}
      >
        设计方案预览
      </div>
    );
  };

  return (
    <div
      style={{
        border: '1px solid #e8e8e8',
        borderRadius: '8px',
        overflow: 'hidden',
        backgroundColor: '#fff',
        transition: 'all 0.3s ease',
      }}
    >
      {/* 预览区域 - 可点击查看大图 */}
      <div
        onClick={() => {
          console.log('DesignPreview: 点击预览区域', design.id);
          if (onClick) onClick();
        }}
        style={{
          ...containerStyle,
          border: 'none',
          borderBottom: '1px solid #e8e8e8',
          cursor: onClick ? 'pointer' : 'default',
          position: 'relative',
        }}
      >
        {renderPreviewContent()}

        {/* 悬停提示 */}
        {onClick && (
          <div
            style={{
              position: 'absolute',
              top: '8px',
              right: '8px',
              background: 'rgba(0, 0, 0, 0.6)',
              color: '#fff',
              padding: '4px 8px',
              borderRadius: '4px',
              fontSize: '12px',
              pointerEvents: 'none',
            }}
          >
            🔍 点击查看大图
          </div>
        )}
      </div>

      {/* 信息区域 */}
      <div style={{ padding: '12px' }}>
        <div
          style={{
            fontSize: '14px',
            fontWeight: 'bold',
            marginBottom: '4px',
            color: '#333',
          }}
        >
          {design.title}
        </div>
        {design.description && (
          <div
            style={{
              fontSize: '12px',
              color: '#666',
              marginBottom: '8px',
              lineHeight: '1.4',
            }}
          >
            {design.description}
          </div>
        )}

        {/* 应用按钮 */}
        <Button
          type="primary"
          onClick={(e) => {
            e.stopPropagation();
            onSelect();
          }}
          style={{
            width: '100%',
            background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
            border: 'none',
          }}
        >
          应用此方案
        </Button>
      </div>
    </div>
  );
};

export default DesignPreview;
